<template>
	<div class="dorm"  @click="bill(item)">
		<div class="dorm_box">
			<div class="dorm_box_head">
				<p class="ThreeTitle van-ellipsis" v-if="item.data_type == 'bill' ">租赁账单</p>
				<p class="ThreeTitle" v-if="item.data_type == 'overdue' ">滞纳金账单</p>
				<p class="ThreeTitle" v-if="item.data_type == 'margin' ">保证金账单</p>
				<!-- <p class="ThreeTitle " v-if="item.park">{{item.park.pk_name}}</p> -->
				<!-- <p class="money">￥{{item.residue_receivable_fee  || item.receivable_amount}}</p> -->
				<p class="money" v-if="item.data_type == 'bill' " >￥{{item.residue_receivable_fee || item.receivable_amount}}</p>
				<p class="money" v-if="item.data_type == 'overdue' " >￥{{item.receivable_amount}}</p>
				<p class="money" v-if="item.data_type == 'margin' " >￥{{item.receivable_fee}}</p>
			</div>
			<div class="dorm_info">
				<div class="dorm_info_item" v-if="item.data_type == 'bill' ">
					<p>
						<span class="Level ">缴费状态：</span>
						<span class="text">未支付</span>
					</p>
					<p>
						<span class="Level ">应付总额：</span>
						<span class="text">{{item.receivable_fee}}元</span>
					</p>
					<p>
						<span class="Level ">已收金额：</span>
						<span class="text">{{item.collection_amount}}元</span>
					</p>
					<p>
						<span class="Level ">应收日期：</span>
						<span class="text">{{item.receivable_date}}</span>
					</p>
					<p>
						<span class="Level ">账单编号：</span>
						<span class="text">{{item.sn?item.sn:item.bill.sn}}</span>
					</p>
					<p>
						<span class="Level ">收款对象：</span>
						<span class="text" v-if="item.contract">{{item.contract.customer_name}}</span>
					</p>
					
					<p>
						<span class="Level ">计费期间：</span>
						<span class="text">{{item.start_date}}至{{item.end_date}}</span>
					</p>
					<p>
						<span class="Level ">租赁位置：</span>
						<span class="text" v-if="item.contract">{{item.contract.room}}</span>
					</p>
				</div>
				<div class="dorm_info_item" v-if="item.data_type == 'overdue' ">
					<p>
						<span class="Level ">缴费状态：</span>
						<span class="text">未支付</span>
					</p>
					<p>
						<span class="Level ">应付总额：</span>
						<span class="text">{{item.receivable_amount}}元</span>
					</p>
					<p>
						<span class="Level ">已收金额：</span>
						<span class="text">{{item.paid}}元</span>
					</p>
					<p>
						<span class="Level ">收款对象：</span>
						<span class="text" v-if="item.contract">{{item.contract.customer_name}}</span>
					</p>
					<p>
						<span class="Level ">关联账单：</span>
						<span class="text" v-if="item.bill">{{item.bill.sn}}</span>
					</p>
					<p>
						<span class="Level ">账单计费期间：</span>
						<span class="text" v-if="item.bill">{{item.bill.start_date}} 至 {{item.bill.end_date}}</span>
					</p>
				</div>
				<div class="dorm_info_item"  v-if="item.data_type == 'margin' " >
					<p>
						<span class="Level ">缴费状态：</span>
						<span class="text">未支付</span>
					</p>
					<p>
						<span class="Level ">应付总额：</span>
						<span class="text">{{item.amount}}元</span>
					</p>
					<p>
						<span class="Level ">已收金额：</span>
						<span class="text">{{item.received_amount}}元</span>
					</p>
					<p>
						<span class="Level ">应收日期：</span>
						<span class="text">{{item.receivable_date}}</span>
					</p>
					<p>
						<span class="Level ">收款对象：</span>
						<span class="text">{{item.customer_name}}</span>
					</p>
					<p>
						<span class="Level ">租赁位置：</span>
						<span class="text">{{item.room}}</span>
					</p>
					<!-- <p>
						<span class="Level ">账单计费期间：</span>
						<span class="text" v-if="item.bill">{{item.bill.start_date}} 至 {{item.bill.end_date}}</span>
					</p> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>	
export default{
	props:["id","item"],
	methods:{
		bill(item){
			if(item.data_type == "overdue"){
				this.$router.push({path:"/fee",query:{"id":item.id,"type":item.data_type}})
			}else if(item.data_type == "bill"){
				this.$router.push({path:"/bill",query:{"id":item.id,"type":item.data_type}})
			}else{
				this.$router.push({path:"/bond",query:{"id":item.id,"type":item.data_type}})
			}
		},
	}
}	
</script>

<style scoped lang="less">
.dorm{
	margin-bottom:40px;
}	
.dorm_box{
	width:95%;
	// height:293px;
	background:rgba(255,255,255,1);
	box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
	border-radius:10px;
	margin:18px auto 0;
	padding-bottom:10px;
	.dorm_box_head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 15px;
		.ThreeTitle{
			font-weight: bold;
			padding:16px 0;
		}
		.money{
			font-size:22px;
			font-weight:600;
			color:rgba(232,23,23,1);
		}
	}
	.dorm_info{
		border-top:1px solid #F1F1F1;
		.dorm_info_item{
			margin:18px auto;
			padding:0px 13px;
			p{
				margin:15px auto;
			}
		}
	}
}	

@media (min-width:750px) {
	.dorm_box{
		width:95%;
		// height:293px;
		background:rgba(255,255,255,1);
		box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
		border-radius:10px;
		margin:18px auto 0;
		padding-bottom:10px;
		.dorm_box_head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 15px;
			.ThreeTitle{
				font-weight: bold;
				padding:16px 0;
			}
			.money{
				font-size:22px;
				font-weight:400;
				color:rgba(232,23,23,1);
			}
		}
		.dorm_info{
			border-top:1px solid #F1F1F1;
			.dorm_info_item{
				margin:18px auto;
				padding:0px 13px;
				p{
					margin:15px auto;
				}
			}
		}
	}	
}
</style>
